<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> -->
<form id="demo">

    <select v-model="method" number>
        <option value="GET">GET</option>
        <option value="POST">POST</option>
        <option value="PUT">PUT</option>
        <option value="DELETE">DELETE</option>
        <option value="HEAD">HEAD</option>
    </select>

    <input type="text" v-model="url"><p>

    Parameters:<p>

    <div v-for="h in params">
        <input v-model="h.name" @blur="param_click">=<input v-model="h.value" @blur="param_click"><p>
    </div>

    Headers:<p>

    <div v-for="h in headers">
        <input v-model="h.name" @blur="header_click">:<input v-model="h.value" @blur="header_click"><p>
    </div>

    <p>Body:<p>

    <textarea v-model="body"></textarea>

    <p>
        <pre>data: {{$data | json 2}}</pre>
    </p>


</form>

<script type="text/javascript">
// var aw_data = {
//     method: 'POST',
//     url: 'https://www.baidu.com',
//     headers: [{
//         'name': 'Host',
//         'value': 'www.baidu.com'
//     }, {
//         'name': 'Content-Type',
//         'value': 'application/json'
//     }, {
//         'name': '',
//         'value': ''
//     }],
//     body: 'this a request body'
// };
$('header_add').on('click', function() {
    console.log('header_add onclick');
});

$(function() {
    new Vue({
        el: '#demo',
        data: args,
        methods: {
            param_click: function() {
                console.log('param_click');
                var last = this.params[this.params.length-1];
                if (last.name == '' && last.value == '') return;
                this.params.push({'name': '', 'value': ''});
            },
            header_click: function() {
                console.log('header_click');
                var last = this.headers[this.headers.length-1];
                if (last.name == '' && last.value == '') return;
                this.headers.push({'name': '', 'value': ''});
            }
        }
    })
});
</script>
